<template>
  <contentModel>
    <div class="plan-alteration-receive-container">
      <!-- 标题 -->
      <page-title title="编辑" style="margin-bottom: 8px"></page-title>
      <div class="elfrom">
        <a-form ref="formRef" :model="form" :layout="layout" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="name"
                label="密级编辑:"
                label-col-flex="400px"
              >
                <a-select
                  v-model="form.section"
                  placeholder="Please select ..."
                  allow-clear
                >
                  <a-option value="section one">MMM</a-option>
                  <a-option value="section two">YYY</a-option>
                  <a-option value="section three">HHH</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="post" label="订单号:" label-col-flex="300px">
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="post"
                label="合同编号:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="变更单号:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="12">
              <a-space direction="vertical" size="large">
                <div>是否变更正文</div>
                <a-radio-group>
                  <a-radio value="A">A</a-radio>
                  <a-radio value="B">B</a-radio>
                </a-radio-group>
              </a-space></a-col
            >
            <a-col :span="12">
              <a-space direction="vertical" :style="{ width: '100%' }">
                <a-upload action="/" directory />
              </a-space>
              <span>样例仅：支持pdf、word等文件格</span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <page-title
        title="订单主信息变更"
        style="margin-bottom: 8px"
      ></page-title>

      <div class="elfrom">
        <a-form ref="formRef" :model="form" :layout="layout" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="name" label="密级:" label-col-flex="400px">
                <a-select
                  v-model="form.section"
                  placeholder="Please select ..."
                  allow-clear
                >
                  <a-option value="section one">MMM</a-option>
                  <a-option value="section two">YYY</a-option>
                  <a-option value="section three">HHH</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="更改单编号:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="post"
                label="采购计划编号:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="物料编码:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="post"
                label="物料名称:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="计量单位:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="post"
                label="订单数量:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="变更后订货数量:"
                label-col-flex="300px"
              >
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="post"
                label="计划到货日期:"
                label-col-flex="300px"
              >
                <a-date-picker
                  style="width: 100%"
                  placeholder="请选择" /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="变更后计划到货日期:"
                label-col-flex="300px"
              >
                <a-date-picker
                  style="width: 100%"
                  placeholder="请选择" /></a-form-item
            ></a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="post" label="编制人:" label-col-flex="300px">
                <a-input
                  v-model="form.name"
                  placeholder="please enter your username..." /></a-form-item
            ></a-col>
            <a-col :span="12">
              <a-form-item
                field="post"
                label="编制日期:"
                label-col-flex="300px"
              >
                <a-date-picker
                  style="width: 100%"
                  placeholder="请选择" /></a-form-item
            ></a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                field="name"
                label="变更原因:"
                label-col-flex="400px"
              >
                <a-textarea
                  placeholder="最大输入300字符"
                  :max-length="300"
                  allow-clear
                  show-word-limit
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="name" label="备注:" label-col-flex="400px">
                <a-textarea
                  placeholder="最大输入300字符"
                  :max-length="300"
                  allow-clear
                  show-word-limit
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <page-title
        title="订单主信息变更"
        style="margin-bottom: 8px"
      ></page-title>

      <a-space>
        <a-button type="primary" @click="addAlterationOrder"
          >添加变更订单</a-button
        >
        <a-button>删除</a-button>
      </a-space>
      <query-page
        v-model:selectedKeys="selectedKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys3"
        :loading="isLoading"
        :data="renderData3"
        :total="100"
        row-selection-type="checkbox"
        @selection-change="selectionChange"
        @query-data="getData"
      >
      </query-page>

      <div class="modal-footer-box">
        <a-button type="primary" @click="handleCancel">保存</a-button>
        <!-- <a-button @click="handleBeforeOk">返回</a-button> -->
      </div>
      <a-modal
        v-model:visible="addAlterationOrderFlag"
        width="70%"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <template #title> 查询条件 </template>
        <query-page
          v-model:selectedKeys="selectedKeys"
          :form-component-config="formComponentConfig"
          :form-render-config="formRenderConfig"
          :form-render-keys="formRenderKeys4"
          :table-component-config="tableComponentConfig"
          :table-render-config="tableRenderConfig"
          :table-render-keys="tableRenderKeys4"
          :loading="isLoading"
          :data="renderData4"
          :total="100"
          row-selection-type="checkbox"
          @selection-change="selectionChange"
          @query-data="getData"
        >
        </query-page>
      </a-modal>
    </div>
  </contentModel>
</template>

<script lang="ts" setup>
  import { ref, onMounted, reactive, defineAsyncComponent } from 'vue';
  import { Message } from '@arco-design/web-vue';
  //   import queryPage from '@/common/components/query-page/index.vue';
  import {
    formRenderConfig,
    formComponentConfig,
  } from '@/views/purchase-order/components/formComp/baseFormConfigAlterationAdministration';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-order/components/tableComp/baseTableConfigAlterationAdministration';
  import { sleep } from '@/utils/tools';
  import { baseRenderKeys } from '@/views/purchase-order/purchase-order-alterationAdministration/baseRenderData';
  // import useModal from '@/common/hooks/modal';
  // import { pageDateList } from '@/api/purchase-order/alterationInquire';
  //   import PageTitle from '../components/page-title.vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const layout = ref('vertical');
  const form = reactive({
    section: {},
    name: '',
    post: '',
    isRead: false,
  });
  const rules = {
    name: [
      {
        required: true,
        message: 'name is required',
      },
    ],
  };
  //  上面的表格 当前表格要渲染哪些值
  const tableRenderKeys3 = ref<any[]>([
    ...baseRenderKeys.finishedProduct.addTableRenderKeys,
  ]);
  // 渲染检索项
  const formRenderKeys4 = ref<any[]>([
    ...baseRenderKeys.finishedProduct.formRenderKeys4,
  ]);
  // 添加按钮页面 采购订单选择 表格
  const tableRenderKeys4 = ref<any[]>([
    ...baseRenderKeys.finishedProduct.addSelectTableRenderKeys,
  ]);
  const selectedKeys = ref([]);
  const isLoading = ref(true);
  const renderData3 = ref<any[]>([]);
  const renderData4 = ref<any[]>([]);
  const getData = async (queryInfo: object) => {
    renderData3.value = [];
    renderData4.value = [];

    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    await sleep(2000);
    const data3 = reactive([
      {
        id: 'id-1',
        orderInfo41: 'tt1',
      },
    ]);
    const data4 = reactive([
      {
        id: 'id-11',
        secretLevel: 'MM',
        orderInfo12: 'tt3',
      },
    ]);
    renderData3.value = data3;
    renderData4.value = data4;

    isLoading.value = false;
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
    if (val.length > 0) {
      Message.success('更新成功/失败!');
    } else {
      Message.warning('没有修改的数据！');
    }
  };
  // 初期话
  const initData = () => {
    console.log('rowBtnList.value');
  };
  onMounted(() => {
    initData();
  });
  // 添加变更订单
  const addAlterationOrderFlag = ref(false);

  const addAlterationOrder = () => {
    addAlterationOrderFlag.value = true;
  };
  const handleOk = () => {
    addAlterationOrderFlag.value = false;
  };
  const handleCancel = () => {
    addAlterationOrderFlag.value = false;
  };
</script>

<style lang="less" scoped>
  .plan-alteration-receive-container {
    // height: calc(100% - 32px);
    padding: 16px 24px;
    background: #fff;
  }

  .elfrom {
    width: 1000px;
    // border: 1px solid #000;
  }

  .modal-footer-box {
    display: flex;
    justify-content: right;
    margin-top: 10px;
    margin-right: 26px;
  }

  .arco-modal-wrapper.arco-modal-wrapper-align-center .arco-modal {
    width: 80%;
  }
</style>
